"use client"

import { useState, useEffect, useRef } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Modal, ScrollView, Pressable, Animated } from "react-native"
import { Volume2, Volume1, Mic, ChevronRight, X, Play, Star } from "lucide-react-native"
import { theme } from "../../constants/theme"
import { useRouter } from "expo-router"

interface Example {
    en: string
    cn: string
}

interface PracticalExamplesProps {
    examples: Example[]
    onRecord: () => void
    wordId: string
    fontSize?: number
    isPlaying?: boolean
    isRecording?: boolean
    onPlayAudio?: (slow?: boolean) => void
}

// 修改SentenceRecordModal组件
function SentenceRecordModal({ visible, onClose, sentence, onRecord, isRecording }) {
    const [currentWordIndex, setCurrentWordIndex] = useState(-1)
    const [isPlayingExample, setIsPlayingExample] = useState(false)
    const [isSlowPlayingExample, setIsSlowPlayingExample] = useState(false)
    const [recordingComplete, setRecordingComplete] = useState(false)
    const [score, setScore] = useState(0)
    const [isPlayingRecording, setIsPlayingRecording] = useState(false)

    // 录音动画
    const pulseAnim = useRef(new Animated.Value(1)).current
    const waveAnim = useRef(new Animated.Value(0)).current

    // 重置所有状态
    const resetState = () => {
        setCurrentWordIndex(-1)
        setIsPlayingExample(false)
        setIsSlowPlayingExample(false)
        setRecordingComplete(false)
        setScore(0)
        setIsPlayingRecording(false)
        pulseAnim.setValue(1)
        waveAnim.setValue(0)
    }

    // 当弹窗关闭时重置状态
    useEffect(() => {
        if (!visible) {
            resetState()
        }
    }, [visible])

    // 录音动画效果
    useEffect(() => {
        let pulseAnimation
        let waveAnimation

        if (isRecording) {
            // 麦克风图标脉动动画
            pulseAnimation = Animated.loop(
                Animated.sequence([
                    Animated.timing(pulseAnim, {
                        toValue: 1.2,
                        duration: 800,
                        useNativeDriver: true,
                    }),
                    Animated.timing(pulseAnim, {
                        toValue: 1,
                        duration: 800,
                        useNativeDriver: true,
                    }),
                ]),
            )

            // 波纹动画
            waveAnimation = Animated.loop(
                Animated.sequence([
                    Animated.timing(waveAnim, {
                        toValue: 1,
                        duration: 1000,
                        useNativeDriver: true,
                    }),
                    Animated.timing(waveAnim, {
                        toValue: 0,
                        duration: 1000,
                        useNativeDriver: true,
                    }),
                ]),
            )

            pulseAnimation.start()
            waveAnimation.start()
        } else {
            pulseAnim.setValue(1)
            waveAnim.setValue(0)
        }

        return () => {
            if (pulseAnimation) pulseAnimation.stop()
            if (waveAnimation) waveAnimation.stop()
        }
    }, [isRecording, pulseAnim, waveAnim])

    // 模拟录音结束后的评分
    useEffect(() => {
        if (!isRecording && recordingComplete) {
            // 模拟评分计算 (实际应用中这里会有真实的评分逻辑)
            const randomScore = Math.floor(Math.random() * 31) + 70 // 70-100之间的随机分数
            setScore(randomScore)
        }
    }, [isRecording, recordingComplete])

    // 模拟单词播放进度
    const simulateWordProgress = (sentence: string, slow = false) => {
        const words = sentence.split(" ")
        let index = 0
        setIsPlayingExample(true)
        if (slow) setIsSlowPlayingExample(true)

        const interval = setInterval(
            () => {
                if (index < words.length) {
                    setCurrentWordIndex(index)
                    index++
                } else {
                    clearInterval(interval)
                    setCurrentWordIndex(-1)
                    setIsPlayingExample(false)
                    setIsSlowPlayingExample(false)
                }
            },
            slow ? 800 : 500,
        )

        return () => {
            clearInterval(interval)
            setIsPlayingExample(false)
            setIsSlowPlayingExample(false)
        }
    }

    // 处理播放按钮点击
    const handlePlayAudio = (slow = false) => {
        simulateWordProgress(sentence.en, slow)
    }

    // 处理录音按钮长按开始
    const handleRecordStart = () => {
        if (!isRecording) {
            onRecord() // 开始录音
            setRecordingComplete(false)
        }
    }

    // 处理录音按钮释放结束
    const handleRecordEnd = () => {
        if (isRecording) {
            onRecord() // 结束录音
            setRecordingComplete(true)
        }
    }

    // 播放录音
    const playRecording = () => {
        setIsPlayingRecording(true)
        // 模拟播放录音的时间
        setTimeout(() => {
            setIsPlayingRecording(false)
        }, 3000)
    }

    // 渲染带有高亮效果的句子
    const renderSentence = (sentence: string) => {
        const words = sentence.split(" ")
        return (
            <Text style={styles.modalEnglishSentence}>
                {words.map((word, index) => (
                    <Text key={index} style={[index === currentWordIndex && styles.highlightedWord]}>
                        {word}
                        {index < words.length - 1 ? " " : ""}
                    </Text>
                ))}
            </Text>
        )
    }

    // 获取评分等级和描述
    const getScoreLevel = (score) => {
        if (score >= 90) return { level: "优秀", color: "#34C759" }
        if (score >= 80) return { level: "良好", color: "#5B8EF4" }
        if (score >= 70) return { level: "一般", color: "#FF9500" }
        return { level: "需要提高", color: "#FF3B30" }
    }

    const scoreInfo = getScoreLevel(score)

    return (
        <Modal visible={visible} transparent animationType="fade">
            <View style={styles.modalOverlay}>
                <View style={styles.modalContent}>
                    <View style={styles.modalHeader}>
                        <Text style={styles.modalTitle}>句子朗读测评</Text>
                        <TouchableOpacity style={styles.modalCloseButton} onPress={onClose}>
                            <X size={20} color={theme.colors.neutral.gray} />
                        </TouchableOpacity>
                    </View>

                    <View style={styles.modalSentenceContainer}>
                        {renderSentence(sentence.en)}
                        <Text style={styles.modalChineseSentence}>{sentence.cn}</Text>

                        <View style={styles.modalAudioControls}>
                            <TouchableOpacity
                                style={[styles.modalAudioButton, isPlayingExample && styles.activeAudioButton]}
                                onPress={() => handlePlayAudio(false)}
                                disabled={isPlayingExample || isSlowPlayingExample || isRecording}
                            >
                                <Volume2
                                    size={20}
                                    color={isPlayingExample ? theme.colors.neutral.white : theme.colors.neutral.darkGray}
                                />
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={[styles.modalAudioButton, isSlowPlayingExample && styles.activeAudioButton]}
                                onPress={() => handlePlayAudio(true)}
                                disabled={isPlayingExample || isSlowPlayingExample || isRecording}
                            >
                                <Text style={[styles.modalSlowText, isSlowPlayingExample && { color: theme.colors.neutral.white }]}>
                                    慢
                                </Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                    {/* 固定高度区域：评分显示或录音动画 */}
                    <View style={styles.feedbackContainer}>
                        {/* 录音完成后的评分区域 */}
                        {recordingComplete && !isRecording ? (
                            <View style={styles.scoreContent}>
                                {/* 分数圆环 */}
                                <View style={styles.scoreCircleWrapper}>
                                    <View style={[styles.scoreCircle, { borderColor: scoreInfo.color }]}>
                                        <Text style={[styles.scoreValue, { color: scoreInfo.color }]}>{score}</Text>
                                    </View>
                                    <View style={styles.scoreInfoContainer}>
                                        <View style={styles.scoreHeaderRow}>
                                            <Text style={styles.scoreTitle}>朗读评分</Text>
                                            <View style={[styles.scoreLevelBadge, { backgroundColor: scoreInfo.color }]}>
                                                <Text style={styles.scoreLevelText}>{scoreInfo.level}</Text>
                                            </View>
                                        </View>
                                        <View style={styles.starsRow}>
                                            {[...Array(5)].map((_, index) => {
                                                const filled = index < Math.floor(score / 20)
                                                return (
                                                    <Star
                                                        key={index}
                                                        size={16}
                                                        color={filled ? scoreInfo.color : "#D1D5DB"}
                                                        fill={filled ? scoreInfo.color : "transparent"}
                                                        style={styles.starIcon}
                                                    />
                                                )
                                            })}
                                        </View>
                                    </View>
                                </View>

                                {/* 播放录音按钮 */}
                                <TouchableOpacity
                                    style={[styles.playRecordingButton, isPlayingRecording && styles.playingRecordingButton]}
                                    onPress={playRecording}
                                    disabled={isPlayingRecording}
                                >
                                    <Play
                                        size={16}
                                        color={isPlayingRecording ? theme.colors.neutral.white : theme.colors.primary.default}
                                    />
                                    <Text style={[styles.playRecordingText, isPlayingRecording && styles.playingRecordingText]}>
                                        {isPlayingRecording ? "播放中..." : "播放录音"}
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        ) : (
                            /* 录音动画效果 */
                            isRecording && (
                                <View style={styles.recordingEffectContainer}>
                                    <Text style={styles.recordingText}>正在录音...</Text>
                                    <View style={styles.waveContainer}>
                                        {[...Array(5)].map((_, index) => (
                                            <Animated.View
                                                key={index}
                                                style={[
                                                    styles.wave,
                                                    {
                                                        height: 10 + index * 5,
                                                        opacity: waveAnim.interpolate({
                                                            inputRange: [0, 1],
                                                            outputRange: [0.3, 0.7],
                                                        }),
                                                        transform: [
                                                            {
                                                                scaleY: waveAnim.interpolate({
                                                                    inputRange: [0, 1],
                                                                    outputRange: [0.6, 1 + index * 0.1],
                                                                }),
                                                            },
                                                        ],
                                                    },
                                                ]}
                                            />
                                        ))}
                                    </View>
                                </View>
                            )
                        )}
                    </View>

                    {/* 录音按钮区域 - 固定在底部 */}
                    <View style={styles.recordButtonContainer}>
                        <TouchableOpacity
                            style={[styles.recordButton, isRecording && styles.recordingButton]}
                            onPressIn={handleRecordStart}
                            onPressOut={handleRecordEnd}
                            delayLongPress={200}
                        >
                            <Animated.View
                                style={{
                                    transform: [{ scale: isRecording ? pulseAnim : 1 }],
                                }}
                            >
                                <Mic size={24} color={theme.colors.neutral.white} />
                            </Animated.View>
                        </TouchableOpacity>
                        <Text style={styles.recordHint}>{isRecording ? "松开结束录音" : "长按开始录音"}</Text>
                    </View>
                </View>
            </View>
        </Modal>
    )
}

// 更多例句模态框组件
function MoreExamplesModal({ visible, onClose, examples, fontSize, onExampleSelect }) {
    return (
        <Modal visible={visible} transparent animationType="fade">
            <View style={styles.modalOverlay}>
                <View style={styles.moreExamplesContent}>
                    <View style={styles.modalHeader}>
                        <Text style={styles.modalTitle}>更多例句</Text>
                        <TouchableOpacity style={styles.modalCloseButton} onPress={onClose}>
                            <X size={20} color={theme.colors.neutral.gray} />
                        </TouchableOpacity>
                    </View>

                    <ScrollView style={styles.examplesScrollView} showsVerticalScrollIndicator={false}>
                        {examples.map((example, index) => (
                            <Pressable
                                key={index}
                                style={styles.exampleItem}
                                onPress={() => {
                                    onExampleSelect(index)
                                    onClose()
                                }}
                            >
                                <Text style={[styles.exampleItemEn, { fontSize }]}>{example.en}</Text>
                                <Text style={[styles.exampleItemCn, { fontSize: fontSize - 2 }]}>{example.cn}</Text>
                            </Pressable>
                        ))}
                    </ScrollView>
                </View>
            </View>
        </Modal>
    )
}

export function PracticalExamples({
    examples,
    onRecord,
    wordId,
    fontSize = 12,
    isPlaying = false,
    isRecording = false,
    onPlayAudio = () => { },
}: PracticalExamplesProps) {
    const [currentExampleIndex, setCurrentExampleIndex] = useState(0)
    const [recordModalVisible, setRecordModalVisible] = useState(false)
    const [moreExamplesModalVisible, setMoreExamplesModalVisible] = useState(false)
    const [currentWordIndex, setCurrentWordIndex] = useState(-1)
    const [isPlayingExample, setIsPlayingExample] = useState(false)
    const [isSlowPlayingExample, setIsSlowPlayingExample] = useState(false)
    const router = useRouter()

    // 当单词ID变化时重置状态
    useEffect(() => {
        setCurrentExampleIndex(0)
        setCurrentWordIndex(-1)
        setIsPlayingExample(false)
        setIsSlowPlayingExample(false)
    }, [wordId])

    // 模拟单词播放进度
    const simulateWordProgress = (sentence: string) => {
        const words = sentence.split(" ")
        let index = 0
        setIsPlayingExample(true)

        const interval = setInterval(() => {
            if (index < words.length) {
                setCurrentWordIndex(index)
                index++
            } else {
                clearInterval(interval)
                setCurrentWordIndex(-1)
                setIsPlayingExample(false)
                setIsSlowPlayingExample(false)
            }
        }, 500)

        return () => {
            clearInterval(interval)
            setIsPlayingExample(false)
            setIsSlowPlayingExample(false)
        }
    }

    // 处理播放按钮点击
    const handlePlayAudio = (slow = false) => {
        if (slow) {
            setIsSlowPlayingExample(true)
        } else {
            setIsPlayingExample(true)
        }
        onPlayAudio(slow)
        simulateWordProgress(examples[currentExampleIndex].en)
    }

    // 处理录音按钮点击
    const handleRecordPress = () => {
        setRecordModalVisible(true)
    }

    // 处理更多按钮点击
    const handleMorePress = () => {
        setMoreExamplesModalVisible(true)
    }

    // 处理选择例句
    const handleExampleSelect = (index: number) => {
        setCurrentExampleIndex(index)
    }

    // 渲染带有高亮效果的句子
    const renderSentence = (sentence: string) => {
        const words = sentence.split(" ")
        return (
            <Text style={[styles.exampleEn, { fontSize }]}>
                {words.map((word, index) => (
                    <Text key={index} style={[index === currentWordIndex && styles.highlightedWord]}>
                        {word}
                        {index < words.length - 1 ? " " : ""}
                    </Text>
                ))}
            </Text>
        )
    }

    // 确保有例句可显示
    if (!examples || examples.length === 0) {
        return null
    }

    const currentExample = examples[currentExampleIndex]

    // 处理详解按钮点击
    // const handleDetailPress = () => {
    //     console.log("详解按钮点击 - 单词:", wordId)
    //     // 导航到详情页面
    //     router.push(`/word-detail-screen?word=${wordId}`)
    // }

    return (
        <View style={styles.practicalSection}>
            <View style={styles.practicalContainer}>
                <View style={styles.header}>
                    <View style={styles.titleContainer}>
                        <View style={styles.titleDecoration} />
                        <Text style={styles.title}>实用口语</Text>
                    </View>

                    {examples.length > 1 && (
                        <TouchableOpacity style={styles.moreButton} onPress={handleMorePress}>
                            <Text style={styles.moreButtonText}>更多</Text>
                            <ChevronRight size={16} color={theme.colors.primary.default} />
                        </TouchableOpacity>
                    )}
                </View>

                <View style={styles.exampleContainer}>
                    {renderSentence(currentExample.en)}
                    <Text style={[styles.exampleCn, { fontSize: fontSize - 2 }]}>{currentExample.cn}</Text>
                </View>

                <View style={styles.audioControlsContainer}>
                    <TouchableOpacity
                        style={[styles.audioControlButton, isPlayingExample && styles.activeAudioButton]}
                        onPress={() => handlePlayAudio(false)}
                        disabled={isPlayingExample || isSlowPlayingExample}
                    >
                        <View style={styles.buttonIconContainer}>
                            <Volume2 size={16} color={isPlayingExample ? theme.colors.neutral.white : theme.colors.primary.default} />
                        </View>
                        <Text style={[styles.buttonLabel, isPlayingExample && styles.activeButtonLabel]}>播放</Text>
                    </TouchableOpacity>

                    <TouchableOpacity
                        style={[styles.audioControlButton, isSlowPlayingExample && styles.activeAudioButton]}
                        onPress={() => handlePlayAudio(true)}
                        disabled={isPlayingExample || isSlowPlayingExample}
                    >
                        <View style={styles.buttonIconContainer}>
                            <Volume1
                                size={16}
                                color={isSlowPlayingExample ? theme.colors.neutral.white : theme.colors.primary.default}
                            />
                        </View>
                        <Text style={[styles.buttonLabel, isSlowPlayingExample && styles.activeButtonLabel]}>慢速</Text>
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.audioControlButton} onPress={handleRecordPress}>
                        <View style={styles.buttonIconContainer}>
                            <Mic size={16} color={theme.colors.primary.default} />
                        </View>
                        <Text style={styles.buttonLabel}>录音</Text>
                    </TouchableOpacity>
                </View>
            </View>

            {/* 句子朗读评测模态框 */}
            <SentenceRecordModal
                visible={recordModalVisible}
                onClose={() => setRecordModalVisible(false)}
                sentence={currentExample}
                onRecord={onRecord}
                isRecording={isRecording}
            />

            {/* 更多例句模态框 */}
            <MoreExamplesModal
                visible={moreExamplesModalVisible}
                onClose={() => setMoreExamplesModalVisible(false)}
                examples={examples}
                fontSize={fontSize}
                onExampleSelect={handleExampleSelect}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    practicalSection: {
        marginVertical: theme.spacing.lg,
    },
    practicalContainer: {
        backgroundColor: "rgba(240, 245, 255, 0.5)",
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        borderWidth: 1,
        borderColor: "rgba(91, 142, 244, 0.1)",
        position: "relative",
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        marginBottom: theme.spacing.md,
    },
    titleContainer: {
        flexDirection: "row",
        alignItems: "center",
    },
    titleDecoration: {
        width: 3,
        height: 16,
        backgroundColor: theme.colors.primary.default,
        marginRight: theme.spacing.sm,
        borderRadius: 1.5,
    },
    title: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
    },
    moreButton: {
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 4,
        paddingHorizontal: 8,
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        borderRadius: theme.borderRadius.medium,
    },
    moreButtonText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        marginRight: 2,
    },
    exampleContainer: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        marginBottom: theme.spacing.md,
        alignItems: "center",
    },
    exampleEn: {
        marginBottom: theme.spacing.xs,
        color: theme.colors.neutral.black,
        textAlign: "center",
        lineHeight: 20,
    },
    exampleCn: {
        color: theme.colors.neutral.gray,
        textAlign: "center",
        marginTop: theme.spacing.xs,
    },
    highlightedWord: {
        backgroundColor: `${theme.colors.primary.default}30`,
        borderRadius: theme.borderRadius.small,
    },
    audioControlsContainer: {
        flexDirection: "row",
        justifyContent: "space-around",
        marginTop: theme.spacing.sm,
        paddingVertical: theme.spacing.sm,
        paddingHorizontal: theme.spacing.md,
        backgroundColor: "rgba(240, 245, 255, 0.7)",
        borderRadius: theme.borderRadius.large,
    },
    audioControlButton: {
        alignItems: "center",
        paddingVertical: 6,
        paddingHorizontal: 12,
        borderRadius: theme.borderRadius.medium,
    },
    activeAudioButton: {
        backgroundColor: theme.colors.primary.default,
    },
    buttonIconContainer: {
        width: 28,
        height: 28,
        borderRadius: 14,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.9)",
        marginBottom: 4,
        borderWidth: 1,
        borderColor: "rgba(91, 142, 244, 0.2)",
    },
    buttonLabel: {
        fontSize: 10,
        color: theme.colors.neutral.darkGray,
    },
    activeButtonLabel: {
        color: theme.colors.neutral.white,
        fontWeight: "600",
    },
    // 模态框样式
    modalOverlay: {
        flex: 1,
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        justifyContent: "center",
        alignItems: "center",
    },
    modalContent: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.extraLarge,
        padding: theme.spacing.xl,
        width: "90%",
        maxWidth: 400,
        alignItems: "center",
    },
    modalHeader: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        width: "100%",
        marginBottom: theme.spacing.lg,
    },
    modalTitle: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
    },
    modalCloseButton: {
        padding: 4,
    },
    modalSentenceContainer: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        width: "100%",
        alignItems: "center",
        borderWidth: 1,
        borderColor: theme.colors.neutral.lightGray,
        marginBottom: theme.spacing.lg,
    },
    modalEnglishSentence: {
        fontSize: theme.fontSize.lg,
        color: theme.colors.neutral.black,
        textAlign: "center",
        marginBottom: theme.spacing.sm,
        lineHeight: 28, // 增加行高，让高亮背景更明显
    },
    modalChineseSentence: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.gray,
        textAlign: "center",
    },
    modalAudioControls: {
        flexDirection: "row",
        justifyContent: "center",
        gap: theme.spacing.md,
        marginTop: theme.spacing.lg,
    },
    modalAudioButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        justifyContent: "center",
        alignItems: "center",
    },
    modalSlowText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },
    // 固定高度容器 - 用于评分或录音动画
    feedbackContainer: {
        width: "100%",
        height: 150, // 固定高度
        justifyContent: "center",
        alignItems: "center",
        marginBottom: theme.spacing.lg,
    },
    // 录音动画效果样式
    recordingEffectContainer: {
        alignItems: "center",
        justifyContent: "center",
        width: "100%",
        height: "100%",
    },
    recordingText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.primary.default,
        marginBottom: theme.spacing.md,
        fontWeight: theme.fontWeight.semiBold,
    },
    waveContainer: {
        flexDirection: "row",
        alignItems: "center",
        height: 40,
        justifyContent: "center",
    },
    wave: {
        width: 4,
        backgroundColor: theme.colors.primary.default,
        borderRadius: 2,
        marginHorizontal: 3,
    },
    // 评分显示区域样式
    scoreContent: {
        width: "100%",
        height: "100%",
        padding: theme.spacing.md,
        justifyContent: "space-between",
        alignItems: "center",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        shadowColor: "rgba(0, 0, 0, 0.1)",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.2,
        shadowRadius: 4,
        elevation: 2,
    },
    scoreCircleWrapper: {
        flexDirection: "row",
        alignItems: "center",
        width: "100%",
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.lg,
    },
    scoreCircle: {
        width: 70,
        height: 70,
        borderRadius: 35,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: theme.colors.neutral.white,
        borderWidth: 3,
        marginRight: theme.spacing.lg,
        shadowColor: "rgba(0, 0, 0, 0.1)",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.2,
        shadowRadius: 3,
        elevation: 2,
    },
    scoreValue: {
        fontSize: 28,
        fontWeight: theme.fontWeight.bold,
    },
    scoreInfoContainer: {
        flex: 1,
    },
    scoreHeaderRow: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.sm,
    },
    scoreTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginRight: theme.spacing.sm,
    },
    scoreLevelBadge: {
        paddingVertical: 2,
        paddingHorizontal: theme.spacing.sm,
        borderRadius: theme.borderRadius.small,
    },
    scoreLevelText: {
        fontSize: theme.fontSize.xs,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.white,
    },
    starsRow: {
        flexDirection: "row",
        alignItems: "center",
    },
    starIcon: {
        marginRight: 2,
    },
    playRecordingButton: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: theme.colors.neutral.lightGray,
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 20,
        width: "80%",
        marginBottom: theme.spacing.md,
    },
    playingRecordingButton: {
        backgroundColor: theme.colors.primary.default,
    },
    playRecordingText: {
        fontSize: theme.fontSize.sm,
        marginLeft: 8,
        fontWeight: theme.fontWeight.medium,
        color: theme.colors.neutral.darkGray,
    },
    playingRecordingText: {
        color: theme.colors.neutral.white,
    },
    // 录音按钮区域 - 固定在底部
    recordButtonContainer: {
        width: "100%",
        alignItems: "center",
        justifyContent: "center",
    },
    recordButton: {
        width: 64,
        height: 64,
        borderRadius: 32,
        backgroundColor: theme.colors.primary.default,
        justifyContent: "center",
        alignItems: "center",
        shadowColor: theme.colors.primary.default,
        shadowOffset: { width: 0, height: 3 },
        shadowOpacity: 0.3,
        shadowRadius: 6,
        elevation: 5,
    },
    recordingButton: {
        backgroundColor: theme.colors.primary.light,
    },
    recordHint: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
        marginTop: theme.spacing.md,
    },
    // 更多例句模态框样式
    moreExamplesContent: {
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.extraLarge,
        padding: theme.spacing.xl,
        width: "90%",
        maxWidth: 400,
        maxHeight: "80%",
    },
    examplesScrollView: {
        maxHeight: 400,
    },
    exampleItem: {
        backgroundColor: "rgba(240, 245, 255, 0.5)",
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        marginBottom: theme.spacing.md,
        borderWidth: 1,
        borderColor: "rgba(91, 142, 244, 0.1)",
    },
    exampleItemEn: {
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.xs,
    },
    exampleItemCn: {
        color: theme.colors.neutral.gray,
    },
})

